<template>
  <a-select
    :value="selected"
    :placeholder="placeholder"
    show-search
    :default-active-first-option="false"
    :show-arrow="true"
    :filter-option="false"
    :not-found-content="null"
    @search="handleSearch"
    @popupScroll="handleScroll"
    @change="handleChange" allowClear>
    <a-select-option v-for="d in dictSearchData" :key="d.value">
      {{ d.text }}
    </a-select-option>
  </a-select>
</template>

<script>
  import { getAction } from '@/api/manage'

  //online表单/报表查询条件 下拉搜索
  export default {
    name: 'JOnlineSearchSelect',
    props:{
      placeholder:{
        type: String,
        default:'',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      sql:{
        type: String,
        default:'',
        required: false
      },
      dict:{
        type: Boolean,
        default: false,
        required: false
      }
    },
    data(){
      this.handleSearch = this.$Jdebounce(this.handleSearch, 800);
      return {
        selected: !this.value?[]:this.value,
        dictSearchData:[],
        pageSize: 10
      }
    },
    watch:{
      value (val) {
        if(!val){
          this.selected = []
        }else{
          this.selected = this.value
        }
      },
      sql:{
        immediate: true,
        handler(){
          this.dictSearchData = []
          this.loadSearchData()
        }
      }
    },
    methods:{
      loadSearchData(keyword){
        //update-begin-author:taoyan date:20220118 for:JTC-59 【online表单】下拉搜索组件的sql，是在前端拼的不安全
        let param = {}
        let url = ''
        if(this.dict===true){
          param = {
            pageSize: this.pageSize,
            keyword: !keyword?'':keyword
          }
          url = `/sys/dict/loadDict/${this.sql}`
        }else{
          param = {
            sql: this.sql,
            keyword: keyword
          }
          url = '/online/cgreport/api/getReportDictList'
        }
        getAction(url, param).then((res) => {
          if (res.success) {
            if(res.result && res.result.length>0){
              this.dictSearchData = res.result
            }else{
              this.dictSearchData = []
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        //update-end-author:taoyan date:20220118 for:JTC-59 【online表单】下拉搜索组件的sql，是在前端拼的不安全
      },
      handleScroll(e){
        /*TODO 下拉加载
        console.log(2,e.target.scrollTop )
        console.log(3,  e.target.querySelector('li').offsetHeight)
        console.log(4,  e.target.offsetHeight)
        console.log(5,  e.target.parentNode.offsetHeight)*/
      },
      handleSearch(value) {
        this.loadSearchData(value)
      },
      handleChange(value) {
        this.$emit('change', value)

        //update--begin--autor:scott-----date:20211116------for：LOWCOD-2218 【online】报表查询条件问题-----
        //点击clear按钮,重置下拉项
        if(!value || value==""){
          this.dictSearchData = []
          this.loadSearchData()
        }
        //update--end--autor:scott-----date:20211116------for：LOWCOD-2218 【online】报表查询条件问题-----

      },

    },
    model: {
      prop: 'value',
      event: 'change'
    }

  }
</script>

<style scoped>

</style>